<template>
  <div class="app-container3">
    <el-scrollbar class="home_view el-scrollbar-bai">
      <div class="home_view_left">
        <div class="view_box1">
          <div class="common_title_wrap">
            <div class="title009">系统状态看板</div>
          </div>
          <div class="box1_list">
            <!-- 故障诊断 -->
            <div class="box1_item">
              <div class="box1_item_title">
                <img
                  class="box1_icon"
                  src="../assets/images/home_box1_icon.png"
                  alt=""
                />
                <div class="box1_title">故障诊断</div>
              </div>
              <div class="box1_item_main">
                <div class="main_icon"></div>
                <div class="main_info">
                  <div class="info_line"></div>
                  <div class="info_item">
                    <div class="info_title">预测设备总数</div>
                    <div class="info_num">250</div>
                  </div>
                  <div class="info_item">
                    <div class="info_title">正常设备</div>
                    <div style="color: #4dffa1" class="info_num">239</div>
                  </div>
                  <div class="info_item">
                    <div class="info_title">异常设备</div>
                    <div style="color: #ffca4b" class="info_num">11</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 故障预测 -->
            <div class="box1_item">
              <div class="box1_item_title">
                <img
                  class="box1_icon"
                  src="../assets/images/home_box1_icon.png"
                  alt=""
                />
                <div class="box1_title">故障预测</div>
              </div>
              <div class="box1_item_main">
                <div class="main_icon"></div>
                <div class="main_info">
                  <div class="info_line"></div>
                  <div class="info_item">
                    <div class="info_title">预测设备总数</div>
                    <div class="info_num">160</div>
                  </div>
                  <div class="info_item">
                    <div class="info_title">正常设备</div>
                    <div style="color: #4dffa1" class="info_num">148</div>
                  </div>
                  <div class="info_item">
                    <div class="info_title">故障设备</div>
                    <div style="color: #ff552e" class="info_num">12</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 健康评估 -->
            <div class="box1_item">
              <div class="box1_item_title">
                <img
                  class="box1_icon"
                  src="../assets/images/home_box1_icon.png"
                  alt=""
                />
                <div class="box1_title">健康评估</div>
              </div>
              <div class="box1_item_main">
                <div class="main_icon"></div>
                <div class="main_info">
                  <div class="info_line"></div>
                  <div class="info_item">
                    <div class="info_title">预测设备总数</div>
                    <div class="info_num">180</div>
                  </div>
                  <div class="info_item">
                    <div class="info_title">正常设备</div>
                    <div style="color: #4dffa1" class="info_num">175</div>
                  </div>
                  <div class="info_item">
                    <div class="info_title">异常设备</div>
                    <div style="color: #ffca4b" class="info_num">5</div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 在线用户 -->
            <div class="box1_item">
              <div class="box1_item_title">
                <img
                  class="box1_icon"
                  src="../assets/images/home_box1_icon.png"
                  alt=""
                />
                <div class="box1_title">在线用户</div>
              </div>
              <div class="box1_item_main">
                <div class="main_icon"></div>
                <div class="main_info">
                  <div class="info_line"></div>
                  <div class="info_item">
                    <div class="info_title">最大在线用户数</div>
                    <div class="info_num">160</div>
                  </div>
                  <div class="info_item">
                    <div class="info_title">当前在线用户数</div>
                    <div style="color: #4dffa1" class="info_num">148</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="view_box2">
          <div class="common_title_wrap">
            <div class="title009">设备健康度</div>
          </div>
          <div class="view_box2_echarts">
            <div class="echarts_main" ref="lineCharts"></div>
          </div>
        </div>
        <div class="view_box3">
          <div class="common_title_wrap">
            <div class="tabbar_list">
              <div
                :class="['tabbar_item', tabbarActItem === item.id && 'act']"
                v-for="item in tabbarList"
                :key="item.id"
                @click="changeTabbarFn(item.id)"
              >
                {{ item.name }}
              </div>
            </div>
          </div>
          <div class="view_box3_content">
            <div class="guzhan_wrap" v-if="tabbarActItem === '01'">
              <el-table
                class="jk_common_table000"
                :data="tableData3"
                style="width: 100%"
              >
                <el-table-column label="序号" align="center">
                  <template slot-scope="scope">
                    {{ "0" + (scope.$index + 1) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="故障设备"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="lv"
                  label="故障级别"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="mode"
                  label="故障模式"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="port"
                  label="故障关联测点"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="reason"
                  label="故障原因"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="programme"
                  label="故障处理方案"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
            <div class="yichang_wrap" v-if="tabbarActItem === '02'">
              <el-table
                class="jk_common_table000"
                :data="tableData4"
                style="width: 100%"
              >
                <el-table-column label="序号" align="center">
                  <template slot-scope="scope">
                    {{ "0" + (scope.$index + 1) }}
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="异常设备"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="lv"
                  label="异常级别"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="mode"
                  label="异常模式"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="port"
                  label="异常关联测点"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="reason"
                  label="异常原因"
                  align="center"
                ></el-table-column>
                <el-table-column
                  prop="programme"
                  label="异常处理方案"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
      <div class="home_view_right">
        <div class="quick_entry">
          <div class="common_title_wrap">
            <div class="title009">系统快速入口</div>
          </div>
          <div class="main_content">
            <div
              class="box1_item act"
              v-for="item in quickEntryList"
              :key="item.id"
            >
              <img class="icon" :src="item.icon" alt="" />
              <div class="text">{{ item.name }}</div>
            </div>
          </div>
        </div>
        <div class="service_status">
          <div class="common_title_wrap">
            <div class="title009">服务运行状态</div>
          </div>
          <div class="main_content">
            <el-table
              class="jk_common_table000"
              :data="tableData1"
              style="width: 100%"
            >
              <el-table-column label="序号" align="center" width="60">
                <template slot-scope="scope">
                  {{ "0" + (scope.$index + 1) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="服务名称"
                width="100"
              ></el-table-column>
              <el-table-column label="服务状态">
                <template slot-scope="scope">
                  <div>{{ scope.row.status }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="ipUrl" label="IP地址"></el-table-column>
              <el-table-column prop="port" label="端口"></el-table-column>
            </el-table>
          </div>
        </div>
        <div class="source_status">
          <div class="common_title_wrap">
            <div class="title009">数据源状态</div>
          </div>
          <div class="main_content">
            <el-table
              class="jk_common_table000"
              :data="tableData2"
              style="width: 100%"
            >
              <el-table-column label="序号" align="center" width="60">
                <template slot-scope="scope">
                  {{ "0" + (scope.$index + 1) }}
                </template>
              </el-table-column>
              <el-table-column
                prop="name"
                label="服务名称"
                width="100"
              ></el-table-column>
              <el-table-column label="服务状态">
                <template slot-scope="scope">
                  <div>{{ scope.row.status }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="ipUrl" label="IP地址"></el-table-column>
              <el-table-column prop="port" label="端口"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import * as echarts from "echarts";
let colorsArr = ["255, 90, 0", "30, 217, 79", "255, 178, 13", "14, 127, 255"];
let options = {
  tooltip: {
    trigger: "axis",
    backgroundColor: "#001830",
    padding: 20,
    borderColor: "#009CFF",
    borderWidth: 2,
    textStyle: {
      fontSize: 14,
      color: "#91C5FF",
    },
  },
  legend: {
    top: "6%",
    icon: "rect",
    itemWidth: 18,
    itemHeight: 3,
    textStyle: {
      color: "#91C5FF",
      fontSize: 14,
    },
  },
  grid: {
    bottom: "8%",
    left: "8%",
    right: "2%",
    top: "18%",
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    axisLabel: {
      textStyle: {
        color: "#6693C4",
        fontSize: 16,
      },
    },
    axisLine: {
      show: false,
    },
    axisTick: {
      show: false,
    },
    data: null,
  },
  yAxis: [
    {
      type: "value",
      max: 100,
      min: 80,
      axisLabel: {
        textStyle: {
          color: "#6693C4",
          fontSize: 16,
        },
      },
      splitLine: {
        lineStyle: {
          type: "dashed",
          color: "rgba(114, 115, 117, 0.4)",
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      scale: true
    },
    
  ],
  series: [],
};
export default {
  name: "Index",
  computed: {},
  data() {
    return {
      quickEntryList: [
        {
          id: "01",
          name: "健康总览",
          icon: require("../assets/images/quickEntry01.png"),
        },
        {
          id: "02",
          name: "故障诊断",
          icon: require("../assets/images/quickEntry02.png"),
        },
        {
          id: "03",
          name: "故障预测",
          icon: require("../assets/images/quickEntry03.png"),
        },
        {
          id: "04",
          name: "健康评估",
          icon: require("../assets/images/quickEntry04.png"),
        },
        {
          id: "05",
          name: "预防维修",
          icon: require("../assets/images/quickEntry05.png"),
        },
        {
          id: "06",
          name: "经验库",
          icon: require("../assets/images/quickEntry06.png"),
        },
        {
          id: "07",
          name: "模型管理",
          icon: require("../assets/images/quickEntry07.png"),
        },
        {
          id: "08",
          name: "日志管窥",
          icon: require("../assets/images/quickEntry08.png"),
        },
        {
          id: "09",
          name: "用户管理",
          icon: require("../assets/images/quickEntry09.png"),
        },
      ],
      tableData1: [
        {
          id: "01",
          name: "后台服务",
          status: "正常",
          ipUrl: "10.10.1.1",
          port: "2100",
        },
        {
          id: "02",
          name: "配置数据库",
          status: "正常",
          ipUrl: "10.10.1.1",
          port: "2100",
        },
        {
          id: "03",
          name: "缓存数据库",
          status: "正常",
          ipUrl: "10.10.1.1",
          port: "2100",
        },
        {
          id: "04",
          name: "缓存数据库",
          status: "正常",
          ipUrl: "10.10.1.1",
          port: "2100",
        },
        {
          id: "05",
          name: "缓存数据库",
          status: "异常",
          ipUrl: "10.10.1.1",
          port: "2100",
        },
      ],
      tableData2: [
        {
          id: "01",
          name: "后台服务",
          status: "正常",
          ipUrl: "10.10.1.1",
          port: "2100",
        },
        {
          id: "02",
          name: "配置数据库",
          status: "正常",
          ipUrl: "10.10.1.1",
          port: "2100",
        },
        {
          id: "03",
          name: "缓存数据库",
          status: "正常",
          ipUrl: "10.10.1.1",
          port: "2100",
        },
        {
          id: "04",
          name: "缓存数据库",
          status: "正常",
          ipUrl: "10.10.1.1",
          port: "2100",
        },
      ],
      tabbarActItem: "01", //01故障 02异常
      tabbarList: [
        {
          id: "01",
          name: "故障列表",
        },
        {
          id: "02",
          name: "异常列表",
        },
      ],
      tableData3: [
        {
          id: "01",
          name: "后台服务",
          lv: "一级",
          mode: "10.10.1.1",
          port: "2100",
          reason: "10.10.1.1",
          programme: "2100",
        },
        {
          id: "02",
          name: "配置数据库",
          lv: "一级",
          mode: "10.10.1.1",
          port: "2100",
          reason: "10.10.1.1",
          programme: "2100",
        },
        {
          id: "03",
          name: "缓存数据库",
          lv: "二级",
          mode: "10.10.1.1",
          port: "2100",
          reason: "10.10.1.1",
          programme: "2100",
        },
        {
          id: "04",
          name: "缓存数据库",
          lv: "一级",
          mode: "10.10.1.1",
          port: "2100",
          reason: "10.10.1.1",
          programme: "2100",
        },
      ],
      tableData4: [
        {
          id: "01",
          name: "后台服务",
          lv: "一级",
          mode: "10.10.1.1",
          port: "2100",
          reason: "10.10.1.1",
          programme: "2100",
        },
        {
          id: "02",
          name: "配置数据库",
          lv: "一级",
          mode: "10.10.1.1",
          port: "2100",
          reason: "10.10.1.1",
          programme: "2100",
        },
        {
          id: "03",
          name: "缓存数据库",
          lv: "二级",
          mode: "10.10.1.1",
          port: "2100",
          reason: "10.10.1.1",
          programme: "2100",
        },
        {
          id: "04",
          name: "缓存数据库",
          lv: "一级",
          mode: "10.10.1.1",
          port: "2100",
          reason: "10.10.1.1",
          programme: "2100",
        },
      ],
      echartsData: [
        {
          name: "7/02",
          value: [91, 99, 92, 99],
        },
        {
          name: "7/04",
          value: [92, 97, 94, 92],
        },
        {
          name: "7/06",
          value: [93, 95, 97, 100],
        },
        {
          name: "7/08",
          value: [94, 93, 94, 93],
        },
        {
          name: "7/10",
          value: [95, 91, 92, 98],
        },
        {
          name: "7/12",
          value: [96, 93, 94, 91],
        },
        {
          name: "7/14",
          value: [97, 95, 97, 100],
        },
        {
          name: "7/16",
          value: [98, 97, 94, 92],
        },
        {
          name: "7/18",
          value: [99, 99, 92, 97],
        },
        {
          name: "7/20",
          value: [98, 97, 94, 92],
        },
        {
          name: "7/22",
          value: [96, 95, 97, 100],
        },
        {
          name: "7/24",
          value: [96, 93, 94, 94],
        },
        {
          name: "7/26",
          value: [94, 91, 92, 99],
        },
        {
          name: "7/28",
          value: [92, 93, 94, 91],
        },
        {
          name: "7/30",
          value: [90, 95, 97, 98],
        },
      ],
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initchartFn();
    });
  },
  methods: {
    changeTabbarFn(id) {
      this.tabbarActItem = id;
    },
    initchartFn() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(this.$refs.lineCharts);
      this.setOptionsFn();
    },
    setOptionsFn() {
      let dataArr = [];
      let sumItemArr = [];
      this.echartsData.forEach((item) => {
        dataArr.push(item.name);
        item.value.forEach((item2, index2) => {
          if (sumItemArr[index2]) {
            sumItemArr[index2].push(item2);
          } else {
            sumItemArr[index2] = [item2];
          }
        });
      });
      options.xAxis.data = dataArr;
      let names = ["历史服务器1", "计算服务器1", "控制站1", "板卡2"]
      options.series = sumItemArr.map((item, index) => {
        return {
          name: names[index],
          type: "line",
          smooth: true,
          showSymbol: false,
          color: `rgba(${colorsArr[index]},1)`,
          emphasis:{
            focus:'series'
          },
          areaStyle: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: `rgba(${colorsArr[index]},0.3)`,
                },
                {
                  offset: 1,
                  color: `rgba(${colorsArr[index]},0)`,
                },
              ],
              false
            ),
          },
          data: item,
        };
      });
      console.log(options.series);
      this.chart.setOption(options);
    },
  },
};
</script>

<style scoped lang="scss">
.home_view {
  width: 100%;
  ::v-deep .el-scrollbar__view {
    display: flex;
  }
  .home_view_left {
    flex: 1 1 auto;
    width: 0;
    display: flex;
    flex-direction: column;
    .view_box1 {
      flex: 0 0 auto;
      .box1_list {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-top: 8px;
        .box1_item {
          width: 24.5%;
          .box1_item_title {
            display: flex;
            height: 42px;
            align-items: center;
            background: url("../assets/images/home_box1_bg.png") center center;
            background-size: 100% 100%;
            .box1_icon {
              width: 32px;
              height: 32px;
            }
            .box1_title {
              font-size: 16px;
              color: #fff;
              margin-left: 4px;
            }
          }
          .box1_item_main {
            width: 100%;
            height: 110px;
            margin-top: 4px;
            background: url("../assets/images/home_box1_sbg.png") center center
              no-repeat;
            background-size: 100% 100%;
            box-sizing: border-box;
            padding: 16px 16px 0 30px;
            position: relative;
            .main_icon {
              position: absolute;
              width: 16px;
              height: 16px;
              top: 18px;
              left: 4px;
              background: url("../assets/images/home_box1_sicon.png") center
                center no-repeat;
              background-size: 100% 100%;
            }
            .main_info {
              display: flex;
              justify-content: space-between;
              position: relative;
              .info_line {
                top: 50%;
                left: 0;
                right: 0;
                transform: translateY(-50%);
                position: absolute;
                background: url("../assets/images/home_box1_line.png") center
                  center no-repeat;
                background-size: 100% 100%;
                width: 100%;
                height: 1px;
              }

              .info_item {
                display: flex;
                flex-direction: column;
                .info_title {
                  font-size: 14px;
                  color: #91c5ff;
                  margin-bottom: 36px;
                }
                .info_num {
                  font-size: 22px;
                  color: #dcedff;
                  font-weight: 700;
                }
              }
            }
          }
        }
      }
    }
    .view_box2 {
      flex: 1 1 auto;
      margin: 16px 0;
      display: flex;
      flex-direction: column;
      .view_box2_echarts {
        flex: 1 1 auto;
        height: 0;
        width: 100%;
        .echarts_main {
          width: 100%;
          height: 100%;
        }
      }
    }
    .view_box3 {
      flex: 0 0 auto;
      .view_box3_content {
        margin-top: 10px;
      }
    }
  }
  .home_view_right {
    width: 400px;
    flex: 0 0 auto;
    margin-left: 14px;
    display: flex;
    flex-direction: column;
    .quick_entry {
      .main_content {
        display: flex;
        flex-wrap: wrap;
        background: url("../assets/images/quickEntrybg.png") center center
          no-repeat;
        background-size: 100% 100%;
        margin-top: 4px;
        width: 100%;
        box-sizing: border-box;
        padding: 14px;
        .box1_item {
          width: 110px;
          height: 80px;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          &:hover {
            background: url("../assets/images/quickEntryhover.png") center
              center no-repeat;
            background-size: 100% 100%;
          }
          &:nth-child(3n-1) {
            margin: 0 20px;
          }
          .icon {
            width: 46px;
            height: 46px;
          }
          .text {
            color: #aecaf5;
            font-size: 14px;
            font-family: Alibaba PuHuiTi;
          }
        }
      }
    }
    .service_status {
      margin-top: 8px;
      .main_content {
        margin-top: 10px;
      }
    }
    .source_status {
      margin-top: 20px;
      .main_content {
        margin-top: 10px;
      }
    }
  }
  .common_title_wrap {
    flex: 0 0 auto;
    width: 100%;
    height: 40px;
    background: url("../assets/images/home_title_bg.png") center center
      no-repeat;
    background-size: 100% 100%;
    font-size: 16px;
    color: #fff;
    line-height: 40px;
    .title009 {
      font-size: 16px;
      color: #fff;
      padding: 0 20px;
    }
    .tabbar_list {
      display: flex;
      align-items: center;
      .tabbar_item {
        width: 150px;
        height: 100%;
        font-size: 16px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        &:hover,
        &.act {
          background: url("../assets/images/home_title_bg.png") left center
            no-repeat;
        }
      }
    }
  }
}
</style>
